<!doctype html>
<html lang="zh-ch">

<head>
    <title>Project9</title>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" charset="utf-8" name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/top-left.css">
</head>

<body>
    <header>
        <div class="logo"><img src="img/logo.png" alt=""></div>
        <div class="search">
            <div class="icon-search"><img src="img/icon-search.png" alt=""></div>
            <input type="test">
        </div>
        <div class="login">
            <div class="icon-login"><img src="img/icon-login.png" alt=""></div>
            <div class="login-text">
                <p>登入</p>
            </div>
        </div>
    </header>
    <div class="side-part">
        <div class="user-info">
            <div class="user">            
                <img src="img/user-portrait.png" alt="用户头像">
                <p>MENG</p>
            </div>
            <div class="collect-fans">
                
                <div class="user-collect">
                    <p>110</p>
                    <p>收藏</p>
                </div>
                <div class="split-line"></div>
                <div class="user-fans">
                    <p>313</p>
                    <p>粉丝</p>
                </div>
         
            </div>
        </div>
        <div class="content-menu">
            <div class="unfold-item">
                <div class="personal-report menu-item">
                    <img src="img/report-white.png" alt="个人报表">
                    <p>个人报表</p>
                </div>
                <div class="unfold-content">
                    <div class="file">
                        <img src="img/fold.png" alt="">
                        <img src="img/file-dark.png" alt="">
                        <p>文件一</p>
                    </div>
                    <div class="unfold-file">
                        <div class="file" id="file-2">
                            <img src="img/unfold.png" alt="">
                            <img src="img/file-dark.png" alt="">
                            <p>文件二</p>
                        </div>
                        <div>
                            <div class="document-1">
                                <img src="img/doc-dark.png" alt="">
                                <p>文档1</p>
                            </div>
                            <div class="document-1">
                                <img src="img/doc-dark.png" alt="">
                                <p>文档1</p>
                            </div>
                        </div>
                    </div>
                    <div class="file">
                        <img src="img/fold.png" alt="">
                        <img src="img/file-dark.png" alt="">
                        <p>文件三</p>                                  
                    </div>
                 </div>
            </div>
            <div class="personal-collect menu-item">
                <img src="img/collect-dark.png" alt="个人收藏">
                <p>个人收藏</p>
            </div>
            <div class="my-share menu-item">
                <img src="img/share-dark.png" alt="我的分享">
                <p>我的分享</p>
            </div>
            <div class="pic-storage menu-item">
                <img src="img/collect-dark.png" alt="图库">
                <p>图库</p>
            </div>
            <div class="growth-record menu-item">
                <img src="img/collect-dark.png" alt="成长记录">
                <p>成长记录</p>
            </div>
            <div class="account-info menu-item">
                <img src="img/account-dark.png" alt="账户信息">
                <p>账户信息</p>
            </div>
        </div>
    </div>    

    <div class="content-container">


    <div class="breadcrumb">
        <p>C站</p>
        <p> / </p>
        <p>个人报表</p>
        <p> / </p>
        <p>文件一</p>
        <p> / </p>
        <p>文档一</p>
    </div>

    <div class="dashboard">

        

        <div id="qyh">
        <div class="searchContent">
            <div class="searchItem fleft">
                <span>查询项</span>
                <div class="select">
                    <select>
                        <option>第一项</option>
                    </select>
                </div>
            </div>
            <div class="transaction fleft">
                <div class="buy">
                    <span>买方</span>
                    <div class="select">
                        <select>
                            <option>小A</option>
                        </select>
                    </div>
                </div>
                <div class="sale">
                    <span>卖方</span>
                    <div class="select">
                        <select>
                            <option>小C</option>
                        </select>
                    </div>
                </div>
                <div class="change">换</div>
            </div>
            <div class="searchTime fleft">
                <div class="date">
                    <span>日期</span>
                    <input value="2016-04-01"></input>
                </div>
                <div class="spendTime">
                    <span>总耗时</span>
                    <div class="select">
                        <select>
                            <option>8天</option>
                        </select>
                    </div>
                </div>
                <div class="personNum">
                    <span>人数</span>
                    <div class="select">
                        <select>
                            <option>10人</option>
                        </select>
                    </div>
                </div>
                <div class="clinchNum">
                    <span>成交项</span>
                    <div class="select">
                        <select>
                            <option>10项</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="searchBtn fleft">
                搜索
            </div>
        </div>


        <div class="historySearch clear">

            <div class="priceList">
                    <div class="leftBtn fleft">
                    </div>
                <ul>
                    <li>
                        <div class="time">
                               10:00 am
                        </div>   
                        <div class="price">
                              <span>￥</span>
                            1200
                        </div>
                    </li>
                    <li>
                        <div class="time">
                               11:00 am
                        </div>   
                        <div class="price">
                              <span>￥</span>
                            1300
                        </div>
                    </li>
                    <li>
                        <div class="time">
                               12:00 am
                        </div>   
                        <div class="price">
                              <span>￥</span>
                            1200
                        </div>
                    </li>
                    <li>
                        <div class="time">
                               01:00 pm
                        </div>   
                        <div class="price">
                              <span>￥</span>
                            1400
                        </div>
                    </li>
                    <li>
                        <div class="time">
                               02:00 pm
                        </div>   
                        <div class="price">
                              <span>￥</span>
                            1500
                        </div>
                    </li>
                    <li>
                        <div class="time">
                               03:00 pm
                        </div>   
                        <div class="price">
                              <span>￥</span>
                            1800
                        </div>
                    </li>
                </ul>

                    <div class="history fright">
                        <span>历史查询</span>
                    </div>
                    
                    <div class="rightBtn fright">
                    </div>

            </div>
        </div>


        <div class="count clear">
              <div class="title">
                2016年4月份统计
              </div>
              <div class="content">
                   <ul>
                       <li>
                                <div class="left">
                                      <div class="num">133311</div>
                                      <span>成交量</span>
                                </div>
                                <div class="right">
                                    
                                </div>
                       </li>

                       <li class="border-blue">
                                <div class="left">
                                      <div class="num">133311</div>
                                      <span>成交量</span>
                                </div>
                                <div class="right bg-blue">
                                    
                                </div>
                       </li>

                       <li class="border-red">
                                <div class="left">
                                      <div class="num">133311</div>
                                      <span>成交量</span>
                                </div>
                                <div class="right bg-red">
                                    
                                </div>
                       </li>

                       <li class="border-yellow">
                                <div class="left">
                                      <div class="num">133311</div>
                                      <span>成交量</span>
                                </div>
                                <div class="right bg-yellow">
                                    
                                </div>
                       </li>

                   </ul>
              </div>
        </div>
    </div>
        <!-- 下方四个方块 -->
        <div class="radius-panel" id="panel1">
            <span class="panel-title">第一组项目</span>
            <div class="penel-content">
                <!-- content -->
                <form id="project-form" class="clearfix">
                    <input type="radio" name="project" id="proj1" checked="checked">
                    <label for="proj1">项目一</label>
                    
                    <input type="radio" name="project" id="proj2">
                    <label for="proj2">项目一</label>
                    
                    <input type="radio" name="project" id="proj3">
                    <label for="proj3">项目一</label>
                    
                    <input type="radio" name="project" id="proj4">
                    <label for="proj4">项目一</label>
                    
                    <input type="radio" name="project" id="proj5">
                    <label for="proj5">项目一</label>
                </form>
                <div id="tab-content">
                    <table>
                        <tr>
                            <td>购买材料一</td>
                            <td>购买材料一</td>
                            <td>购买材料一</td>
                            <td>购买材料一</td>
                        </tr>
                        <tr>
                            <td>购买材料二</td>
                            <td>购买材料二</td>
                            <td>购买材料二</td>
                            <td>购买材料二</td>
                        </tr>
                        <tr>
                            <td>购买材料四</td>
                            <td>购买材料四</td>
                            <td>购买材料四</td>
                            <td>购买材料四</td>
                        </tr>
                        <tr>
                            <td>购买材料六</td>
                            <td>购买材料六</td>
                            <td>购买材料六</td>
                            <td>购买材料六</td>
                        </tr>
                        <tr>
                            <td>购买材料十三</td>
                            <td>购买材料十三</td>
                            <td>购买材料十三</td>
                            <td>购买材料十三</td>
                        </tr>
                        <tr>
                            <td>购买材料二十</td>
                            <td>购买材料二十</td>
                            <td>购买材料二十</td>
                            <td>购买材料二十</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="radius-panel" id="panel2">
            <span class="panel-title">第一组项目</span>
            <div class="penel-content">
                <!-- content -->
                <div id="search">
                    <div class="serch-item" id="serch-item1">
                        <span>标题</span>
                            <p>项目报表三</p>
                    </div>
                    <div class="serch-item" id="serch-item2">
                        <span>价格</span>
                            <p>￥158</p>
                    </div>
                    <div class="serch-item" id="serch-item3">
                        <span>负责人</span>
                            <p>小A</p>
                    </div>
                    <div class="serch-item" id="serch-item4">
                        <span>详细描述</span>
                            <p>该项目目前负责人是......</p>
                    </div>
                    <div class="serch-item" id="serch-item5">
                        <input type="checkbox" id="protocol" checked="checked">
                        <label for="protocol">遵守保密协议</label>
                        <a href="" id="search-button">搜索</a>
                    </div>
                      
                </div>
            </div>
        </div>



        <div class="radius-panel" id="panel3">
            <span class="panel-title">日历</span>
            <div class="penel-content">
                <div class="panel3-top">
                    <select id="year">
                        <option value="2016">2016年</option>
                        <option value="2015">2015年</option>
                        <option value="2014">2014年</option>
                        <option value="other">其他</option>
                    </select>
                    <!-- have bug here><-->
                    <select id="month">
                        <option value="4">4月</option>
                        <option value="1">1月</option>
                        <option value="2">2月</option>
                        <option value="3">3月</option>
                        <option value="4">4月</option>
                        <option value="5">5月</option>
                        <option value="6">6月</option>
                        <option value="7">7月</option>
                        <option value="8">8月</option>
                        <option value="9">9月</option>
                        <option value="10">10月</option>
                        <option value="11">11月</option>
                        <option value="12">12月</option>
                    </select>
                    <select id="day">
                        <option value="default">标注日期</option>
                        <option value="other">......</option>
                    </select>
                    <input type="submit" value="返回今天">
                </div>
                <div class="calendar">
                    <table class="firstline">
                        <tr>
                            <td>一</td>
                            <td>二</td>
                            <td>三</td>
                            <td>四</td>
                            <td>五</td>
                            <td>六</td>
                            <td>日</td>
                        </tr>
                    </table>
                    <table class="tr-content">
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>
                                <p>1</p>
                                <p class="special-day">愚人节</p>
                            </td>
                            <td>
                                <p class="holiday">2</p>
                                <p>廿五</p>
                            </td>
                            <td>
                                <p class="holiday">3</p>
                                <p>廿六</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>4</p>
                                <p>廿七</p>
                            </td>
                            <td>
                                <p>5</p>
                                <p class="special-day">清明</p>
                            </td>
                            <td>
                                <p>6</p>
                                <p>廿九</p>
                            </td>
                            <td>
                                <p>7</p>
                                <p>三月</p>
                            </td>
                            <td>
                                <p>8</p>
                                <p>初二</p>
                            </td>
                            <td class="chosen">
                                <p class="holiday">9</p>
                                <p>初三</p>
                            </td>
                            <td>
                                <p class="holiday">10</p>
                                <p>初四</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>11</p>
                                <p>初五</p>
                            </td>
                            <td class="chosen">
                                <p>12</p>
                                <p>初六</p>
                            </td>
                            <td>
                                <p>13</p>
                                <p>初七</p>
                            </td>
                            <td>
                                <p>14</p>
                                <p>初八</p>
                            </td>
                            <td>
                                <p>15</p>
                                <p>初九</p>
                            </td>
                            <td>
                                <p class="holiday">16</p>
                                <p>初十</p>
                            </td>
                            <td>
                                <p class="holiday">17</p>
                                <p>十一</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>18</p>
                                <p>十二</p>
                            </td>
                            <td class="chosen">
                                <p>19</p>
                                <p>十三</p>
                            </td>
                            <td>
                                <p>20</p>
                                <p>十四</p>
                            </td>
                            <td>
                                <p>21</p>
                                <p>十五</p>
                            </td>
                            <td>
                                <p>22</p>
                                <p>十六</p>
                            </td>
                            <td>
                                <p class="holiday">23</p>
                                <p>十七</p>
                            </td>
                            <td>
                                <p class="holiday">24</p>
                                <p>十八</p>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <p>25</p>
                                <p>十九</p>
                            </td>
                            <td>
                                <p>26</p>
                                <p>廿十</p>
                            </td>
                            <td>
                                <p>27</p>
                                <p>廿一</p>
                            </td>
                            <td>
                                <p>28</p>
                                <p>廿二</p>
                            </td>
                            <td>
                                <p>29</p>
                                <p>廿三</p>
                            </td>
                            <td>
                                <p class="holiday">30</p>
                                <p>廿四</p>
                            </td>
                            <td>
                                <p></p>
                                <p></p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="radius-panel" id="panel4">
            <span class="panel-title">汽车行业品牌榜</span>
            <div class="penel-content">
                <div class="car-table">
                    <table>
                        <tr>
                            <th>排名</th>
                            <th>品牌</th>
                            <th>搜索指数</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>大众</td>
                            <td><span>48912001</span>
                                <div class="progress-bar">
                                    <div id="probar1"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>丰田</td>
                            <td><span>29307333</span>
                                <div class="progress-bar">
                                    <div id="probar2"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>奥迪</td>
                            <td><span>23139070</span>
                                <div class="progress-bar">
                                    <div id="probar3"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>本田</td>
                            <td><span>22885564</span>
                                <div class="progress-bar">
                                    <div id="probar4"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>福特</td>
                            <td><span>22324792</span>
                                <div class="progress-bar">
                                    <div id="probar5"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>宝马</td>
                            <td><span>21444077</span>
                                <div class="progress-bar">
                                    <div id="probar6"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>7</td>
                            <td>现代</td>
                            <td><span>20114969</span>
                                <div class="progress-bar">
                                    <div id="probar7"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>起亚</td>
                            <td><span>19251680</span>
                                <div class="progress-bar">
                                    <div id="probar8"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>9</td>
                            <td>奔驰</td>
                            <td><span>19172837</span>
                                <div class="progress-bar">
                                    <div id="probar9"></div>
                                </div>
                        </tr>
                        <tr>
                            <td>10</td>
                            <td>别克</td>
                            <td><span>18544027</span>
                                <div class="progress-bar">
                                    <div id="probar10"></div>
                                </div>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

    </div>

</body>

</html>